<template>
    <div>
        <!-- <video  style="width:100%;height:auto;" id="monitorPlayer"
            class="video-js vjs-default-skin vjs-big-play-centered " data-setup="{}" controls muted autoplay="true"
            preload="../assets/images/play.png">
            <source :src='url' type="application/x-mpegURL" />
        </video> -->
        <DHPlayer style="width:100%;height:auto;" ref="DHPlayerdemo"></DHPlayer>
    </div>
</template>

<script>
    import DHPlayer from "../player/demo.vue"
    import videojs from 'video.js';
    export default {
        components: { DHPlayer },
        // props:{
        //     url:{
        //         type:String,
        //         default: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
        //     },
        //     // width:{
        //     //     type:'String',
        //     //     default: '100%'
        //     // }
        // },
        props: [
            'url',
            'biaoshi'
        ],
        watch: {
            url(val) {
                this.playMonitor();
                //  console.log( val,"视频路径数据！");

            },
            biaoshi(val){
                if(val){
                    this.playMonitor();
                }
                // console.log( val,"视频播放嘛！");
            }
            // moduleInfor(val) {
            //     //console.log(val)
            //     this.moduleData = val
            // },
        },
        data() {
            return {
                url1: 'rtsp://10.18.128.45:9090/dss/monitor/params?cameraid=1000004%24143&substream=1&trackID=701'
            };
        },
        methods: {
            // setplayingStatus(val){
            //     this.playingStatus = val
            // },
            playMonitor() {
                let path = this.url;
                console.log(path, "ZZZZZZZZZZZZZZ");
                this.$refs.DHPlayerdemo.changeUrl(path);
                // this.$refs[DHPlayer].setRealTime({path: this.path, snum: this.currentNum, redirect: this.isRedirect})
            },
            // playDH(){
            //     this.$refs[DHPlayer].setRealTime({path: this.path, snum: 0, redirect: false})
            //     // this.$refs[DHPlayer].setRealTime({path: this.path, snum: this.currentNum, redirect: this.isRedirect})
            // },
            // closePlayer() {
            //     // this.playerDialog = false;
            //     // this.playerParams.url = '';
            //     // this.dp.destroy();
            // },
            // changePageNum(val) {
            //     this.formSearch.current = val;
            //     this.dataProcessing();
            // },
            // dataProcessing() {
            //     const tableData = [];
            //     for (let i = 0; i < 10; i++) {
            //         tableData.push({
            //             id: (Math.PI * Math.random() * 10000).toFixed(0),
            //             deviceName: `${i + 1}号设备`,
            //             sectionName: `一栋${i + 1}层`,
            //         });
            //     }
            //     return tableData;
            // },
        },
        mounted() {
            this.playMonitor();
        },
        beforeDestroy() {
            this.closePlayer();
        },
        // methods:{
        //     videojs('monitorPlayer').play()
        // },
        // beforeDestroy(){
        //     videojs('monitorPlayer').pause();
        //     videojs('monitorPlayer').dispose();
        // }
    };
</script>

<style>
</style>